<template>
	<view class="container">
		<!-- 头部 -->
		<view class="container-header">
			<!-- 内容 -->
			<view class="container-header-box">
				<text class="iconfont ">&#xe738;</text>
				<input type="text" :value="search" />
				<text class="iconfont">&#xe61f;</text>
				<text class="iconfont">&#xe661;</text>
				<text class="iconfont ico">&#xebde;</text>
				<text class="iconfont ico">&#xe664;</text>
			</view>
		</view>
		<!-- 新闻 -->
		<view class="container-news">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" >
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image :src="item.content" mode="scaleToFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 快捷跳转 -->
		<view class="container-menu">
			<navigator :url="i.router" v-for="i in menuData">
				<text :class="['iconfont',i.color]" v-html="i.img"></text>
				<view>
					{{i.title}}
				</view>
			</navigator>
		</view>
		<!-- 新闻趣事 -->
		<view class="container-tips">
			<view class="container-tips-title">
				时事
			</view>
			<view class="container-tips-box" v-for="i in shisData">
				<image :src="i.img" mode="scaleToFill"></image>
				<view>
					<view>
						<h3>{{i.title}}</h3><text>不感兴趣</text>
					</view>
					<view>
						{{i.content}}
					</view>
					<view>
						<text>{{i.author}}</text>
						<text>{{i.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 新闻趣事 -->
		<view class="container-tips">
			<view class="container-tips-title">
				娱乐
			</view>
			<view class="container-tips-box" v-for="i in yulData">
				<image :src="i.img" mode="scaleToFill"></image>
				<view>
					<view>
						<h3>{{i.title}}</h3><text>不感兴趣</text>
					</view>
					<view>
						{{i.content}}
					</view>
					<view>
						<text>{{i.author}}</text>
						<text>{{i.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 新闻趣事 -->
		<view class="container-tips">
			<view class="container-tips-title">
				科技
			</view>
			<view class="container-tips-box" v-for="i in kejData">
				<image :src="i.img" mode="scaleToFill"></image>
				<view>
					<view>
						<h3>{{i.title}}</h3><text>不感兴趣</text>
					</view>
					<view>
						{{i.content}}
					</view>
					<view>
						<text>{{i.author}}</text>
						<text>{{i.time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";

	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				search: '腾讯有难，八方点赞',
				info: [{
					content: '../../static/image/index/bg1.png'
				}, {
					content: '../../static/image/index/bg2.png'
				}, {
					content: '../../static/image/index/bg3.png'
				}],
				current: 0,
				mode: 'round',
				menuData:[
					{img:'&#xe67d;',title:'互联网购物',color:'red',router:'../store/goodsList/goodsList'},
					{img:'&#xe622;',title:'细胞运输',color:'blue',router:'../celltransport/celltransport'},
					{img:'&#xe61c;',title:'百事通',color:'yellow',router:'../knowitall/knowitall'},
					{img:'&#xe62b;',title:'赏金猎人',color:'origin',router:'../bountyHunter7/bountyHunter7'},
					{img:'&#xe64b;',title:'地方特色',color:'green',router:'../localcolor/localcolor'},
					{img:'&#xe740;',title:'政民互动',color:'origin',router:'../interaction10/interaction10'},
					{img:'&#xe7c4;',title:'互联网办公',color:'blue',router:'../interwork/interwork'},
					{img:'&#xe62c;',title:'政企管理',color:'red',router:'../zqmanage13/zqmanage13'}
				],
				shisData:[
					{img:'../../static/image/contacts/userlogo.jpg',title:'王上将陨落，谁将继位',content:'据晴雪姑娘透露，王上在战斗中受的伤一直没有愈合',author:'旧华社',time:'2020-07-02'},
					{img:'../../static/image/contacts/userlogo.jpg',title:'王上将陨落，谁将继位',content:'据晴雪姑娘透露，王上在战斗中受的伤一直没有愈合',author:'旧华社',time:'2020-07-02'},
					{img:'../../static/image/contacts/userlogo.jpg',title:'王上将陨落，谁将继位',content:'据晴雪姑娘透露，王上在战斗中受的伤一直没有愈合',author:'旧华社',time:'2020-07-02'},
				],
				yulData:[
					{img:'../../static/image/contacts/userlogo2.jpg',title:'北洛被关小黑屋',content:'据悉王上北洛出门忘带钱包，王妃买花时无法付账',author:'环魔界报',time:'2020-07-02'},
					{img:'../../static/image/contacts/userlogo2.jpg',title:'北洛被关小黑屋',content:'据悉王上北洛出门忘带钱包，王妃买花时无法付账',author:'环魔界报',time:'2020-07-02'},
					{img:'../../static/image/contacts/userlogo2.jpg',title:'北洛被关小黑屋',content:'据悉王上北洛出门忘带钱包，王妃买花时无法付账',author:'环魔界报',time:'2020-07-02'},
				],
				kejData:[
					{img:'../../static/image/contacts/userlogo3.jpg',title:'百神祭所祭百神？',content:'黄帝修建百神祭所真的是为了祭神么？霒蚀君道出真相',author:'天鹿日报',time:'2020-07-02'},
					{img:'../../static/image/contacts/userlogo3.jpg',title:'百神祭所祭百神？',content:'黄帝修建百神祭所真的是为了祭神么？霒蚀君道出真相',author:'天鹿日报',time:'2020-07-02'},
					{img:'../../static/image/contacts/userlogo3.jpg',title:'百神祭所祭百神？',content:'黄帝修建百神祭所真的是为了祭神么？霒蚀君道出真相',author:'天鹿日报',time:'2020-07-02'},
				],
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../static/fontSize.less");

	/* 主体 */
	.container {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.container-header {
		height: 150rpx;
		position: sticky;
		top: 0;
		background-color: @masterColor;
		z-index: 900;

		/* 内容 */
		.container-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;

			text {
				font-size: @fontBiggest;

				&:first-child {
					margin-left: 28rpx;
				}

				&:nth-child(3) {
					margin: 0 28rpx 0 38rpx;
				}

				&.ico {
					position: absolute;
					top: 30rpx;
					font-size: @fontBig;
					color: #999999;

					&:nth-of-type(4) {
						left: 145rpx;
					}

					&:last-child {
						left: 490rpx;
						font-size: @fontBigger;
					}
				}
			}

			input {
				width: 420rpx;
				height: 58rpx;
				margin-left: 50rpx;
				line-height: 58rpx;
				text-indent: 60rpx;
				color: #A4A4A4;
				background-color: @colorWrite;
				font-size: @fontBase;
				border-radius: 15rpx;
			}
		}
	}
	
	/* 轮播图 */
	.container-news{
		image{
			width: 750rpx;
			height: 360rpx;
		}
	}
	
	/* 快捷菜单 */
	.container-menu{
		display: flex;
		padding: 20rpx 0;
		flex-wrap: wrap;
		background-color: @colorWrite;
		&>navigator{
			display: flex;
			margin-bottom: 15rpx;
			width: 25%;
			flex-wrap: wrap;
			justify-content: center;
			&>text{
				display: block;
				margin:10rpx 0 5rpx;
				width: 88rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: @fontBiggest;
				color: @colorWrite;
				background-color: #3396FC;
				border-radius: 36rpx;
				&.yellow{
					background-color: #FEAC00;
				}
				&.green{
					background-color: #15BC84;
				}
				&.origin{
					background-color: #FF943D;
				}
				&.blue{
					background-color: #4DA9EC;
				}
				&.red{
					background-color: #F25542;
				}
				&.gray{
					color: #747D86;
					background-color: #F3F4F6;
				}
			}
			&>view{
				width: 100%;
				text-align: center;
				font-size: @fontSmall;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	
	/* 新闻 */
	.container-tips{
		margin-top: 20rpx;
		background-color: @colorWrite;
		&>.container-tips-title{
			height: 96rpx;
			line-height: 96rpx;
			text-indent: 32rpx;
			border-bottom: 1rpx solid #F0F0F0;
		}
		&>.container-tips-box{
			display: flex;
			margin: 25rpx 0 0 32rpx;
			padding-bottom: 25rpx;
			border-bottom: 1rpx solid #EBEBEB;
			image{
				width: 120rpx;
				height: 120rpx;
				margin-right: 15rpx;
				border-radius: 10rpx;
			}
			&>view{
				width: 551rpx;
				&>view:nth-child(1){
					display: flex;
					justify-content: space-between;
					h3{
						width: 400rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					text{
						color: #D1D1D1;
					}
					
				}
				&>view:nth-child(2){
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				&>view:nth-child(3){
					display: flex;
					justify-content: space-between;
					color: #D1D1D1;
				}
			}
		}
	}
</style>
